<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="container">
      <div class="header">
        <!-- 左边 -->
        <div class="searchSub">
          <el-form :model="searchForm" label-width="80px" :inline="false" size="normal" class="formStyle">
            <el-form-item label="关键字">
              <el-input type="text" v-model="searchForm.keyword" size="small" clearable @clear="quitSearch"></el-input>
            </el-form-item>
            <el-button @click="quitSearch" size="small" class="btnStyle">清除</el-button>
            <el-button type="primary" size="small" @click="searchSubjects" class="btnStyle">搜索</el-button>
          </el-form>
        </div>
      </div>
      <!-- 提示 -->
      <div class="noticeSub">
        <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>
      </div>
      <!-- 表格 -->
      <div class="detail">
        <el-table :data="detailList" stripe>
          <el-table-column label="编号" align="center" prop="id"></el-table-column>
          <el-table-column label="题型" align="center" prop="questionType">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType == 1">单选</span>
              <span v-if="scope.row.questionType == 2">多选</span>
              <span v-if="scope.row.questionType == 3">简单</span>
            </template>
          </el-table-column>
          <el-table-column label="题目编号" align="center">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" v-for="(item, index) in scope.row.questionIDs" :key="index" @click="linkGo(item)">
                {{ item.number }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.addTime | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="答题时间(s)" align="center" prop="totalSeconds"></el-table-column>
          <el-table-column label="正确率(%)" align="center" prop="accuracyRate"></el-table-column>
          <el-table-column label="录入人" align="center" prop="userName"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="default" class="el-icon-delete" circle plain @click="delQuestions(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination background layout="->,prev, pager, next,total,sizes,jumper " :total="total" :page-sizes="[5, 10, 15, 20, 30]" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
      <el-dialog title="题目预览" :visible.sync="questionDialogShow" width="60%" @close="questionDialogShow = false">
        <questions-preview :info="detailRow" v-if="questionDialogShow"></questions-preview>
        <span slot="footer">
          <el-button type="primary" @click="questionDialogShow = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
// 导入方法
import { randoms, removeRandoms } from '@/api/hmmm/questions'
// 导入组件
import QuestionsPreview from '../components/questions-preview.vue'
const SubjectItem = {
  keyword: '' // 关键字
}
export default {
  components: {
    QuestionsPreview
  },
  data() {
    return {
      addDialogVisible: false, // 添加弹框
      detailList: [], // 表格信息
      searchForm: {
        ...SubjectItem
      },
      page: 1, // 页码
      pagesize: 10, // 数量
      total: 0, // 总数
      id: null, // 曲线救国
      questionDialogShow: false, // 弹框
      detailRow: {} // 当前点击行信息
    }
  },
  created() {
    this.loadSubjectsDeatils()
  },
  methods: {
    // 获取页面信息函数
    async loadSubjectsDeatils() {
      let { data: res } = await randoms({
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.searchForm.keyword
      })
      this.detailList = res.items
      this.total = res.counts
    },
    // 数量变化
    sizeChange(val) {
      this.pagesize = val
      this.loadSubjectsDeatils()
    },
    // 页码变化
    pageChange(val) {
      this.page = val
      this.loadSubjectsDeatils()
    },
    // 清除按钮
    quitSearch() {
      this.page = 1
      this.searchForm = { ...SubjectItem }
      this.loadSubjectsDeatils()
    },
    // 搜索框
    searchSubjects() {
      this.loadSubjectsDeatils() // 发送请求
    },
    // 删除学科
    async delQuestions(id) {
      // 询问
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 执行删除
        await removeRandoms({
          id
        })
        this.$message.success('删除成功')
        if (this.pagesize !== 1 && this.detailList.length === 1) {
          this.page--
        }
        this.loadSubjectsDeatils()
      } catch (error) {
        this.$message.info('取消删除')
      }
    },
    linkGo(val) {
      console.log(val)
      this.detailRow = { id: val.id } // 将本行数据赋值
      this.questionDialogShow = true // 打开弹框
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.formStyle {
  display: flex;
  justify-content: flex-start;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.noticeSub {
  margin-left: 30px;
  margin-bottom: 20px;
}
.btnStyle {
  margin-top: 4px;
  margin-left: 10px;
  width: 56px;
  height: 32px;
}
</style>
